<script lang="ts">
import { computed, reactive, ref } from 'vue'
import { useToast } from 'wot-design-uni'
import type { PhoneLoginReq } from '@/apis'
import { getSmsCaptcha } from '@/apis'
import { useUserStore } from '@/stores'

export default {
  options: {
    virtualHost: true, // 虚拟节点
    styleIsolation: 'shared', // 解除样式隔离
  },
}
</script>

<script lang="ts" setup>
const emits = defineEmits(['back'])

const userStore = useUserStore()
const loading = ref(false)
const form = reactive<PhoneLoginReq>({
  phone: '',
  captcha: '',
})

// 验证码
const captchaTimer = ref()
const captchaTime = ref(60)
const captchaBtnName = ref('获取验证码')
const captchaDisable = ref(false)
const captchaLoading = ref(false)
// 重置验证码
const resetCaptcha = () => {
  clearInterval(captchaTimer.value)
  captchaTime.value = 60
  captchaBtnName.value = '获取验证码'
  captchaDisable.value = false
}

const toast = useToast()
const canLogin = computed(() => {
  if (form.phone && form.captcha) {
    return true
  }
  return false
})

const getCaptcha = async () => {
  if (!form.phone) {
    toast.warning('请输入正确的手机号')
    return
  }
  try {
    captchaLoading.value = true
    captchaBtnName.value = '发送中...'
    await getSmsCaptcha({
      phone: form.phone,
    })
    captchaLoading.value = false
    captchaDisable.value = true
    captchaBtnName.value = `(${(captchaTime.value -= 1)}s)`
    toast.success('短信发送成功,请注意查收!')
    captchaTimer.value = setInterval(() => {
      captchaTime.value -= 1
      captchaBtnName.value = `(${(captchaTime.value -= 1)}s)`
      if (captchaTime.value <= 0) {
        resetCaptcha()
      }
    }, 1000)
  } catch (error) {
    // toast.error('短信发送失败,请注意查收!')
    console.log('error: ', error)
    resetCaptcha()
  } finally {
    captchaLoading.value = false
  }
}

const onLogin = async () => {
  loading.value = true
  try {
    await userStore.loginByPhone(form)
    await userStore.refreshUserInfo()
    uni.switchTab({ url: '/pages/index/index' })
  } finally {
    loading.value = false
  }
}

const onBack = () => {
  emits('back')
}
</script>

<template>
  <wd-toast />
  <view class="my w-full">
    <wd-input
      v-model="form.phone"
      type="digit"
      size="large"
      placeholder="请输入手机号"
      clearable
      :maxlength="11"
      :no-border="true"
      :use-prefix-slot="true"
    >
      <template #prefix>
        <i class="iconfont iconfont-mobile text-gray-5 !text-size-xl" />
      </template>
    </wd-input>
  </view>

  <view class="my w-full flex-row-between-center">
    <wd-input
      v-model="form.captcha"
      type="digit"
      size="large"
      placeholder="验证码"
      clearable
      :maxlength="6"
      :no-border="true"
      :use-prefix-slot="true"
    >
      <template #prefix>
        <i class="iconfont iconfont-lock text-gray-5 !text-size-xl" />
      </template>
    </wd-input>
    <view class="ml h-44px w-220rpx">
      <button
        size="mini"
        class="w-full bg-primary text-white !px-8px"
        :loading="captchaLoading"
        :disabled="captchaDisable"
        @click="getCaptcha"
      >
        <text class="text-14px leading-44px">
          {{ captchaBtnName }}
        </text>
      </button>
    </view>
  </view>
  <wd-button
    :block="true"
    :round="false"
    size="large"
    :disabled="!canLogin"
    :loading="loading"
    @click="onLogin"
  >
    登录
  </wd-button>
  <!-- <button
    class="btn-secondary mt"
    plain
    :disabled="!canLogin"
    :loading="loading"
    @click="onLogin"
  >
    登录
  </button> -->
  <view class="mt">
    <wd-button
      style="margin-top: 6rpx;"
      :block="true"
      :round="false"
      size="large"
      plain
      @click="onBack"
    >
      返回
    </wd-button>
  </view>
</template>

<style lang=scss scoped>

</style>
